<template>
  <div>
    <!-- 搜索框 -->
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="菜品名称">
        <el-input v-model="foodName" placeholder="菜品名称" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getFoodPage()">搜索</el-button>
        <el-button @click="toAdd">添加菜品</el-button>
      </el-form-item>
    </el-form>

     <el-divider />

    <!-- table表格 -->
    <el-table :data="foodList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="foodName" label="菜品名称"  />
      <el-table-column  label="菜品图片"  >
        <template #default="scope">
          <img :src="scope.row.foodImg" width="50" height="50" />
        </template>
        </el-table-column>
      <el-table-column prop="foodPrice" label="菜品价格"  />
      <el-table-column prop="categoryName" label="菜品分类"  />
      <el-table-column prop="status" label="菜品状态"  >
        <template #default="scope">
          <el-tag v-if="scope.row.status == 0" type="success">上架</el-tag>
          <el-tag v-else type="danger">下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="foodExplain" label="菜品介绍"  />
     
      <el-table-column  label="操作" >
        <template #default="scope">
          <el-button size="small" @click="toEdit(scope.row)">
            修改
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="changeStatus(scope.row)"
          >
            {{ scope.row.status == 0 ? '下架' : '上架' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-divider />

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 新增/修改对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="title" width="500">
      <el-form :model="food">
        <el-form-item label="菜品名称" >
          <el-input v-model="food.foodName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="菜品分类" >
          <el-select
            v-model="food.categoryId"
            placeholder="请选择菜品分类"
            style="width: 240px"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="菜品图片" >
          <!-- <el-input v-model="food.foodImg" autocomplete="off" /> -->
          <el-upload
            
            class="avatar-uploader"
            action="http://localhost:9090/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="food.foodImg"  :src="food.foodImg" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="菜品价格" >
          <el-input v-model="food.foodPrice" autocomplete="off" />
        </el-form-item>

        <el-form-item label="菜品介绍" >
          <el-input v-model="food.foodExplain" autocomplete="off" />
        </el-form-item>

        <el-form-item label="菜品备注" >
          <el-input v-model="food.remarks" autocomplete="off" />
        </el-form-item>

        <el-form-item label="菜品状态" >
          <el-switch v-model="food.status" :active-value="0" :inactive-value="1"/>
        </el-form-item>
      
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveOrEditFood">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import categoryAPI from '@/api/category.js'
import foodAPI from '@/api/food.js'

  export default {
    data () {
      return {
        foodName:"",
        foodList:[],
        categoryList:[],
        currentPage:1,
        pageSize:2,
        total:0,
        food:{},
        title:'新增分类',
        dialogFormVisible:false,
        businessId:''
      }
    },
    methods:{
      handleAvatarSuccess(resp){
        this.food.foodImg = resp.data;
      },
      changeStatus(row){
          // 发起异步请求，改变菜品状态
          row.status = row.status == 0 ? 1 : 0;
          foodAPI.updateFood(row).then(res=>{
              ElMessage.success(res.msg);
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.getFoodPage();
          })
          
      },
      
      toEdit(row){
        // 修改标题
        this.title = '修改菜品';
        this.dialogFormVisible = true;
        // 深拷贝,实现数据回显
        this.food = JSON.parse(JSON.stringify(row));
        this.getCategoryList();
      },
      toAdd(){
        // 修改标题
        this.title = '新增菜品';
        this.dialogFormVisible = true;
        // 清除数据
        this.food = {}
        this.getCategoryList();
      },
      // 新增或修改菜品信息
      saveOrEditFood(){
        if(this.title == '新增菜品'){
          this.food.businessId = this.businessId;
          // 新增
          foodAPI.addCFood(this.food).then(res=>{
              ElMessage.success(res.msg);
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.getFoodPage();
          })
         
        }else{
          // 修改
          foodAPI.updateFood(this.food).then(res=>{
              ElMessage.success(res.msg);
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.getFoodPage();
            
          })
        }
      },
      handleSizeChange(val){
        this.pageSize = val;
        //重新发起分页查询
        this.getFoodPage();
      },
      handleCurrentChange(val){
        this.page = val;
        //重新发起分页查询
        this.getFoodPage();
      },
      getFoodPage(){
        // 分页带条件查询
        const data = {
          page:this.currentPage,
          pageSize:this.pageSize,
          foodName:this.foodName,
          businessId:this.businessId
        };
        // qs.Stringify(data)  转成  page=1&pageSize=5&account=&nickname=&telephone=
        foodAPI.getFoodList(data).then(res=>{
          // res 等价于后台返回的result={code,data,msg}
            this.foodList = res.data.list;
            this.total = res.data.total;
         
        })
      },
      getCategoryList(){
        // 分页带条件查询
        const data = {
          page:1,
          pageSize:1000,
          businessId:this.businessId
        };
        // qs.Stringify(data)  转成  page=1&pageSize=5&account=&nickname=&telephone=
        categoryAPI.getCategoryList(data).then(res=>{
          // res 等价于后台返回的result={code,data,msg}
            this.categoryList = res.data.list;
        })
      }
      
    },
    created(){
      // todo 商家登陆后,赋值商家id
      this.businessId = 10001 ;
      // 调用分页带条件查询方法
      this.getFoodPage();
    }
  }
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>